<template>
 <div class="column">
   <div class="box-list">
         <div class="box">
            <p class="text"><span>残疾人数</span></p>
            <p class="num">9346</p>
          </div>
          <div class="box">
            <p class="text"><span>村(社区)数</span></p>
            <p class="num">9346</p>
          </div>
          <div class="box">
            <p class="text"><span>多(街道/镇)数</span></p>
            <p class="num">9346</p>
          </div>
          <div class="box">
            <p class="text"><span>县(区)数</span></p>
            <p class="num">9346</p>
          </div>
   </div>
 
  </div>
</template>

<script>
export default {
  name: 'catenav',
  data () {
    return {
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-list{
   display: flex;
   justify-content: space-between;
 }
 .box{
  width: 220px;
  height:180px;
  background: url(../../../static/panelbox.png) no-repeat;
  text-align: center;
  background-size:100% auto;
  color:#fff;
 }
  .box .text{
    padding:20px 0;
  }
 .box .text span{
   font-size:16px;
   border-radius: 8px;
   padding:5px 50px;
   background: -webkit-linear-gradient(left,#006ae1,#16b7ff);
   background: -webkit-linear-gradient(left,#006ae1,#16b7ff);
		background: -o-linear-gradient(left,#006ae1,#16b7ff);
		background: -moz-linear-gradient(left,#006ae1,#16b7ff);
		background: -mos-linear-gradient(left,#006ae1,#16b7ff);
		background: linear-gradient(left,#006ae1,#16b7ff);
   
 }
 .box .num{
   font-size:32px;
    color:#58dbff;
 }
 
</style>
